<!-- 数据可视化组件 - 支持Cesium、OpenLayers、ECharts、D3.js -->
<template>
  <div class="data-visualization">
    <!-- 可视化工具栏 -->
    <div class="visualization-toolbar">
      <div class="toolbar-left">
        <el-button-group>
          <el-button 
            :type="visualizationType === 'tree' ? 'primary' : ''"
            size="small"
            @click="switchVisualization('tree')"
          >
            <el-icon><Share /></el-icon>
            关系树
          </el-button>
          <el-button 
            :type="visualizationType === 'map' ? 'primary' : ''"
            size="small"
            @click="switchVisualization('map')"
          >
            <el-icon><Location /></el-icon>
            地理分布
          </el-button>
          <el-button 
            :type="visualizationType === 'chart' ? 'primary' : ''"
            size="small"
            @click="switchVisualization('chart')"
          >
            <el-icon><TrendCharts /></el-icon>
            数据图表
          </el-button>
          <el-button 
            :type="visualizationType === '3d' ? 'primary' : ''"
            size="small"
            @click="switchVisualization('3d')"
          >
            <el-icon><View /></el-icon>
            3D视图
          </el-button>
        </el-button-group>
      </div>
      
      <div class="toolbar-right">
        <el-button size="small" @click="resetView">
          <el-icon><RefreshRight /></el-icon>
          重置视图
        </el-button>
        <el-button size="small" @click="saveView">
          <el-icon><Picture /></el-icon>
          保存视图
        </el-button>
      </div>
    </div>

    <!-- 可视化容器 -->
    <div class="visualization-container">
      <!-- 关系树视图 -->
      <div 
        v-show="visualizationType === 'tree'"
        ref="treeContainerRef"
        class="tree-view"
      >
        <div class="view-header">
          <h3>数据关系图谱</h3>
          <div class="tree-controls">
            <el-slider
              v-model="treeDepth"
              :min="1"
              :max="5"
              size="small"
              @change="updateTreeDepth"
            />
            <span>层级深度</span>
          </div>
        </div>
        <div ref="d3TreeRef" class="d3-tree-container"></div>
      </div>

      <!-- 地图视图 -->
      <div 
        v-show="visualizationType === 'map'"
        ref="mapContainerRef"
        class="map-view"
      >
        <div class="view-header">
          <h3>地理数据分布</h3>
          <div class="map-controls">
            <el-switch
              v-model="use3DMap"
              active-text="3D"
              inactive-text="2D"
              @change="toggleMapMode"
            />
          </div>
        </div>
        <div ref="mapRef" class="map-container"></div>
      </div>

      <!-- 图表视图 -->
      <div 
        v-show="visualizationType === 'chart'"
        class="chart-view"
      >
        <div class="view-header">
          <h3>数据统计图表</h3>
          <div class="chart-controls">
            <el-select v-model="chartType" size="small" @change="updateChart">
              <el-option label="柱状图" value="bar" />
              <el-option label="折线图" value="line" />
              <el-option label="饼图" value="pie" />
              <el-option label="散点图" value="scatter" />
              <el-option label="雷达图" value="radar" />
            </el-select>
          </div>
        </div>
        <div class="chart-grid">
          <div ref="mainChartRef" class="main-chart"></div>
          <div ref="subChart1Ref" class="sub-chart"></div>
          <div ref="subChart2Ref" class="sub-chart"></div>
        </div>
      </div>

      <!-- 3D视图 -->
      <div 
        v-show="visualizationType === '3d'"
        ref="cesiumContainerRef"
        class="cesium-view"
      >
        <div class="view-header">
          <h3>三维数据场景</h3>
          <div class="cesium-controls">
            <el-button size="small" @click="flyToLocation">
              <el-icon><Position /></el-icon>
              定位
            </el-button>
            <el-button size="small" @click="toggleTerrain">
              <el-icon><MagicStick /></el-icon>
              地形
            </el-button>
          </div>
        </div>
        <div ref="cesiumRef" class="cesium-container"></div>
      </div>
    </div>

    <!-- 数据详情面板 -->
    <div v-if="selectedNodeData" class="data-details-panel">
      <div class="details-header">
        <span>{{ selectedNodeData.name }}</span>
        <el-button size="small" text @click="closeDetails">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
      <div class="details-content">
        <div class="detail-item">
          <label>类型:</label>
          <span>{{ selectedNodeData.type }}</span>
        </div>
        <div class="detail-item" v-if="selectedNodeData.location">
          <label>位置:</label>
          <span>{{ selectedNodeData.location }}</span>
        </div>
        <div class="detail-item" v-if="selectedNodeData.size">
          <label>大小:</label>
          <span>{{ selectedNodeData.size }}</span>
        </div>
        <div class="detail-item" v-if="selectedNodeData.lastUpdate">
          <label>更新时间:</label>
          <span>{{ selectedNodeData.lastUpdate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Share,
  Location,
  TrendCharts,
  View,
  RefreshRight,
  Picture,
  Position,
  MagicStick,
  Close
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  selectedNode: {
    type: Object,
    default: null
  },
  visualizationType: {
    type: String,
    default: 'tree'
  }
})

// Emits
const emit = defineEmits(['visualizationChange'])

// 组件引用
const treeContainerRef = ref(null)
const d3TreeRef = ref(null)
const mapContainerRef = ref(null)
const mapRef = ref(null)
const mainChartRef = ref(null)
const subChart1Ref = ref(null)
const subChart2Ref = ref(null)
const cesiumContainerRef = ref(null)
const cesiumRef = ref(null)

// 数据状态
const visualizationType = ref(props.visualizationType)
const selectedNodeData = ref(null)
const treeDepth = ref(3)
const use3DMap = ref(false)
const chartType = ref('bar')

// 实例引用
let d3TreeInstance = null
let mapInstance = null
let cesiumViewer = null
let mainChart = null
let subChart1 = null
let subChart2 = null

// 切换可视化类型
const switchVisualization = (type) => {
  visualizationType.value = type
  emit('visualizationChange', type)
  
  nextTick(() => {
    switch (type) {
      case 'tree':
        initD3Tree()
        break
      case 'map':
        initMap()
        break
      case 'chart':
        initCharts()
        break
      case '3d':
        initCesium()
        break
    }
  })
}

// 初始化D3关系树
const initD3Tree = async () => {
  if (!d3TreeRef.value) return
  
  try {
    // 动态导入D3.js
    const d3 = await import('d3')
    
    // 清空容器
    d3.select(d3TreeRef.value).selectAll('*').remove()
    
    // 创建SVG
    const width = d3TreeRef.value.clientWidth
    const height = d3TreeRef.value.clientHeight
    
    const svg = d3.select(d3TreeRef.value)
      .append('svg')
      .attr('width', width)
      .attr('height', height)
    
    const g = svg.append('g')
      .attr('transform', `translate(${width / 2}, 50)`)
    
    // 创建树布局
    const tree = d3.tree().size([width - 200, height - 100])
    
    // 模拟数据
    const treeData = {
      name: '电磁数据根节点',
      children: [
        {
          name: '信号级数据',
          children: [
            { name: '雷达信号' },
            { name: '通信信号' }
          ]
        },
        {
          name: '功能级数据',
          children: [
            { name: '分析结果' },
            { name: '处理数据' }
          ]
        }
      ]
    }
    
    const root = d3.hierarchy(treeData)
    tree(root)
    
    // 绘制连线
    g.selectAll('.link')
      .data(root.links())
      .enter().append('path')
      .attr('class', 'link')
      .attr('d', d3.linkVertical()
        .x(d => d.x)
        .y(d => d.y))
      .style('fill', 'none')
      .style('stroke', '#409EFF')
      .style('stroke-width', 2)
    
    // 绘制节点
    const node = g.selectAll('.node')
      .data(root.descendants())
      .enter().append('g')
      .attr('class', 'node')
      .attr('transform', d => `translate(${d.x}, ${d.y})`)
      .on('click', (event, d) => {
        selectedNodeData.value = {
          name: d.data.name,
          type: d.children ? '分组' : '数据',
          level: d.depth
        }
      })
    
    node.append('circle')
      .attr('r', 8)
      .style('fill', '#409EFF')
      .style('stroke', '#ffffff')
      .style('stroke-width', 2)
      .style('cursor', 'pointer')
    
    node.append('text')
      .attr('dy', -15)
      .attr('text-anchor', 'middle')
      .text(d => d.data.name)
      .style('fill', '#bfcbd9')
      .style('font-size', '12px')
      .style('cursor', 'pointer')
    
    d3TreeInstance = { svg, g, tree, root }
    
  } catch (error) {
    console.error('D3树形图初始化失败:', error)
    ElMessage.error('树形图初始化失败')
  }
}

// 初始化地图
const initMap = async () => {
  if (!mapRef.value) return
  
  try {
    if (use3DMap.value) {
      // 使用Cesium 3D地图
      await initCesiumMap()
    } else {
      // 使用OpenLayers 2D地图
      await initOpenLayersMap()
    }
  } catch (error) {
    console.error('地图初始化失败:', error)
    ElMessage.error('地图初始化失败')
  }
}

// 初始化OpenLayers地图
const initOpenLayersMap = async () => {
  try {
    // 这里应该导入OpenLayers，为了演示使用模拟实现
    const mapContainer = mapRef.value
    mapContainer.innerHTML = ''
    
    // 创建地图容器
    const mapDiv = document.createElement('div')
    mapDiv.style.width = '100%'
    mapDiv.style.height = '100%'
    mapDiv.style.background = 'linear-gradient(180deg, #1e3a8a 0%, #3b82f6 100%)'
    mapDiv.style.position = 'relative'
    mapDiv.style.borderRadius = '0.5vh'
    
    // 添加模拟地图内容
    mapDiv.innerHTML = `
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                  color: #bfcbd9; text-align: center; font-size: 1rem;">
        <div>📍 北京 - 雷达信号站</div>
        <div style="margin-top: 1vh;">📍 上海 - 通信信号站</div>
        <div style="margin-top: 1vh;">📍 广州 - 数据处理中心</div>
        <div style="margin-top: 2vh; font-size: 0.8rem; color: #8591a3;">
          OpenLayers 2D地图视图
        </div>
      </div>
    `
    
    mapContainer.appendChild(mapDiv)
    
  } catch (error) {
    console.error('OpenLayers地图初始化失败:', error)
  }
}

// 初始化Cesium 3D地图
const initCesiumMap = async () => {
  try {
    // 这里应该导入Cesium，为了演示使用模拟实现
    const mapContainer = mapRef.value
    mapContainer.innerHTML = ''
    
    // 创建3D地图容器
    const cesiumDiv = document.createElement('div')
    cesiumDiv.style.width = '100%'
    cesiumDiv.style.height = '100%'
    cesiumDiv.style.background = 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%)'
    cesiumDiv.style.position = 'relative'
    cesiumDiv.style.borderRadius = '0.5vh'
    
    // 添加模拟3D地球内容
    cesiumDiv.innerHTML = `
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                  color: #bfcbd9; text-align: center; font-size: 1rem;">
        <div style="font-size: 3rem; margin-bottom: 1vh;">🌍</div>
        <div>三维地球数据可视化</div>
        <div style="margin-top: 1vh; font-size: 0.8rem; color: #8591a3;">
          Cesium 3D地图视图
        </div>
      </div>
    `
    
    mapContainer.appendChild(cesiumDiv)
    
  } catch (error) {
    console.error('Cesium 3D地图初始化失败:', error)
  }
}

// 初始化图表
const initCharts = async () => {
  try {
    // 动态导入ECharts
    const echarts = await import('echarts')
    
    // 初始化主图表
    if (mainChartRef.value) {
      mainChart = echarts.init(mainChartRef.value, 'dark')
      updateMainChart()
    }
    
    // 初始化子图表1
    if (subChart1Ref.value) {
      subChart1 = echarts.init(subChart1Ref.value, 'dark')
      updateSubChart1()
    }
    
    // 初始化子图表2
    if (subChart2Ref.value) {
      subChart2 = echarts.init(subChart2Ref.value, 'dark')
      updateSubChart2()
    }
    
  } catch (error) {
    console.error('图表初始化失败:', error)
    ElMessage.error('图表初始化失败')
  }
}

// 更新主图表
const updateMainChart = () => {
  if (!mainChart) return
  
  const option = {
    title: {
      text: '数据类型分布',
      textStyle: { color: '#bfcbd9' }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      textStyle: { color: '#bfcbd9' }
    },
    series: [
      {
        type: chartType.value === 'pie' ? 'pie' : 'bar',
        data: chartType.value === 'pie' 
          ? [
              { value: 156, name: '雷达信号' },
              { value: 89, name: '通信信号' },
              { value: 234, name: '分析结果' },
              { value: 167, name: '处理数据' }
            ]
          : [156, 89, 234, 167],
        radius: chartType.value === 'pie' ? '60%' : undefined
      }
    ],
    xAxis: chartType.value === 'bar' ? {
      type: 'category',
      data: ['雷达信号', '通信信号', '分析结果', '处理数据'],
      axisLabel: { color: '#bfcbd9' }
    } : undefined,
    yAxis: chartType.value === 'bar' ? {
      type: 'value',
      axisLabel: { color: '#bfcbd9' }
    } : undefined
  }
  
  mainChart.setOption(option)
}

// 更新子图表1
const updateSubChart1 = () => {
  if (!subChart1) return
  
  const option = {
    title: {
      text: '时间分布',
      textStyle: { color: '#bfcbd9', fontSize: 12 }
    },
    xAxis: {
      type: 'category',
      data: ['01-12', '01-13', '01-14', '01-15'],
      axisLabel: { color: '#8591a3', fontSize: 10 }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#8591a3', fontSize: 10 }
    },
    series: [{
      type: 'line',
      data: [23, 45, 32, 67],
      smooth: true,
      lineStyle: { color: '#409EFF' },
      areaStyle: { color: 'rgba(64, 158, 255, 0.1)' }
    }]
  }
  
  subChart1.setOption(option)
}

// 更新子图表2
const updateSubChart2 = () => {
  if (!subChart2) return
  
  const option = {
    title: {
      text: '地域分布',
      textStyle: { color: '#bfcbd9', fontSize: 12 }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 35, name: '北京' },
        { value: 25, name: '上海' },
        { value: 20, name: '广州' },
        { value: 20, name: '深圳' }
      ],
      label: {
        fontSize: 10,
        color: '#bfcbd9'
      }
    }]
  }
  
  subChart2.setOption(option)
}

// 初始化Cesium 3D视图
const initCesium = async () => {
  if (!cesiumRef.value) return
  
  try {
    // 模拟Cesium 3D场景
    const cesiumContainer = cesiumRef.value
    cesiumContainer.innerHTML = ''
    
    const cesiumDiv = document.createElement('div')
    cesiumDiv.style.width = '100%'
    cesiumDiv.style.height = '100%'
    cesiumDiv.style.background = 'radial-gradient(circle, #1e293b 0%, #0f172a 100%)'
    cesiumDiv.style.position = 'relative'
    cesiumDiv.style.borderRadius = '0.5vh'
    
    cesiumDiv.innerHTML = `
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                  color: #bfcbd9; text-align: center; font-size: 1rem;">
        <div style="font-size: 4rem; margin-bottom: 1vh;">🛰️</div>
        <div>三维电磁数据场景</div>
        <div style="margin-top: 1vh; font-size: 0.8rem; color: #8591a3;">
          WebGL 三维渲染引擎
        </div>
      </div>
    `
    
    cesiumContainer.appendChild(cesiumDiv)
    
  } catch (error) {
    console.error('Cesium初始化失败:', error)
    ElMessage.error('3D视图初始化失败')
  }
}

// 工具栏操作
const resetView = () => {
  switch (visualizationType.value) {
    case 'tree':
      if (d3TreeInstance) {
        d3TreeInstance.g.transition().duration(750)
          .attr('transform', `translate(${d3TreeRef.value.clientWidth / 2}, 50)`)
      }
      break
    case 'map':
      ElMessage.info('地图视图已重置')
      break
    case 'chart':
      if (mainChart) mainChart.resize()
      if (subChart1) subChart1.resize()
      if (subChart2) subChart2.resize()
      break
    case '3d':
      ElMessage.info('3D视图已重置')
      break
  }
}

const saveView = () => {
  ElMessage.success('视图快照已保存')
}

const updateTreeDepth = () => {
  if (visualizationType.value === 'tree') {
    initD3Tree()
  }
}

const toggleMapMode = () => {
  if (visualizationType.value === 'map') {
    initMap()
  }
}

const updateChart = () => {
  if (visualizationType.value === 'chart') {
    updateMainChart()
  }
}

const flyToLocation = () => {
  ElMessage.info('飞行到指定位置')
}

const toggleTerrain = () => {
  ElMessage.info('地形显示已切换')
}

const closeDetails = () => {
  selectedNodeData.value = null
}

// 对外暴露的方法
const locateData = (data) => {
  selectedNodeData.value = data
  
  switch (visualizationType.value) {
    case 'map':
      ElMessage.success(`已在地图中定位到: ${data.name}`)
      break
    case '3d':
      ElMessage.success(`已在3D场景中定位到: ${data.name}`)
      break
    default:
      ElMessage.success(`已定位到数据: ${data.name}`)
  }
}

// 监听选中节点变化
watch(() => props.selectedNode, (newNode) => {
  if (newNode) {
    selectedNodeData.value = newNode
  }
})

// 窗口大小调整处理
const handleResize = () => {
  if (mainChart) mainChart.resize()
  if (subChart1) subChart1.resize()
  if (subChart2) subChart2.resize()
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    switchVisualization(visualizationType.value)
  })
  
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // 清理资源
  if (mainChart) mainChart.dispose()
  if (subChart1) subChart1.dispose()
  if (subChart2) subChart2.dispose()
  if (cesiumViewer) cesiumViewer.destroy()
  
  window.removeEventListener('resize', handleResize)
})

// 暴露方法给父组件
defineExpose({
  switchVisualization,
  locateData
})
</script>

<style scoped>
.data-visualization {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0f1b;
  position: relative;
}

/* 工具栏 */
.visualization-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1.5vw;
  background: rgba(31, 45, 61, 0.8);
  border-bottom: 1px solid #2d3a4b;
  backdrop-filter: blur(0.5vh);
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 1vw;
}

/* 可视化容器 */
.visualization-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* 视图通用样式 */
.tree-view, .map-view, .chart-view, .cesium-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1vh 1.5vw;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 0.5vh;
  border-bottom: 1px solid rgba(45, 58, 75, 0.5);
}

.view-header h3 {
  margin: 0;
  color: #bfcbd9;
  font-size: 1.1rem;
  font-weight: 600;
}

/* D3树形图 */
.d3-tree-container {
  flex: 1;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 0.5vh;
  overflow: hidden;
}

.tree-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
  color: #bfcbd9;
  font-size: 0.8rem;
}

/* 地图视图 */
.map-container {
  flex: 1;
  border-radius: 0.5vh;
  overflow: hidden;
}

.map-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

/* 图表视图 */
.chart-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1vh;
}

.main-chart {
  grid-row: 1 / 3;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 0.5vh;
}

.sub-chart {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 0.5vh;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

/* Cesium 3D视图 */
.cesium-container {
  flex: 1;
  border-radius: 0.5vh;
  overflow: hidden;
}

.cesium-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

/* 数据详情面板 */
.data-details-panel {
  position: absolute;
  top: 8vh;
  right: 1.5vw;
  width: 25vw;
  max-width: 30vw;
  background: rgba(38, 52, 69, 0.95);
  border: 1px solid #2d3a4b;
  border-radius: 0.5vh;
  backdrop-filter: blur(0.8vh);
  z-index: 100;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1.2vw;
  border-bottom: 1px solid #2d3a4b;
  color: #bfcbd9;
  font-weight: 600;
}

.details-content {
  padding: 1vh 1.2vw;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin: 0.5vh 0;
  color: #bfcbd9;
  font-size: 0.85rem;
}

.detail-item label {
  color: #8591a3;
  font-weight: 500;
}

/* Element Plus 组件深色主题覆盖 */
.data-visualization :deep(.el-button) {
  background: rgba(38, 52, 69, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  backdrop-filter: blur(0.3vh);
}

.data-visualization :deep(.el-button:hover) {
  background: rgba(45, 58, 75, 0.9) !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.data-visualization :deep(.el-button--primary) {
  background: rgba(64, 158, 255, 0.9) !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

.data-visualization :deep(.el-button-group .el-button) {
  background: rgba(38, 52, 69, 0.6) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.data-visualization :deep(.el-button-group .el-button--primary) {
  background: #409EFF !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

.data-visualization :deep(.el-slider__runway) {
  background: #2d3a4b !important;
}

.data-visualization :deep(.el-slider__bar) {
  background: #409EFF !important;
}

.data-visualization :deep(.el-slider__button) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

.data-visualization :deep(.el-switch) {
  --el-switch-on-color: #409EFF;
  --el-switch-off-color: #2d3a4b;
}

.data-visualization :deep(.el-select) {
  background: rgba(38, 52, 69, 0.8) !important;
}

.data-visualization :deep(.el-select .el-input__wrapper) {
  background: rgba(38, 52, 69, 0.8) !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.data-visualization :deep(.el-select .el-input__inner) {
  background: transparent !important;
  color: #bfcbd9 !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .data-details-panel {
    width: 30vw;
    max-width: 35vw;
  }
  
  .chart-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr;
  }
  
  .main-chart {
    grid-row: 1;
  }
}

@media (max-width: 768px) {
  .visualization-toolbar {
    flex-direction: column;
    gap: 1vh;
    padding: 1vh;
  }
  
  .data-details-panel {
    width: 90vw;
    max-width: none;
    right: 5vw;
  }
}
</style>